<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新选择器</title>
</head>
<body>
<h3>新选择器</h3>
<ul>
    <li class="item">item1</li>
    <li class="item">item2</li>
    <li class="item">item3</li>
    <li class="item">item4</li>
    <li class="item">item5</li>
    <li class="item">item6</li>
    <li class="item">item7</li>
    <li class="item">item8</li>
    <li class="item">item9</li>
    <li class="item">item10</li>
</ul>
</body>
<script>
    //匿名函数，可以将作用域分隔开
    (function(){
        var liem = document.querySelector(".item");  //只选择第一个
        console.log(liem.innerHTML);
        var lis = document.querySelectorAll("ul>li");  //选择全部
        for(var i=0;i<lis.length;i++){
            console.log(lis[i]);
            lis[i].addEventListener("click",function(){
                debugger;  //可以调试代码。类似于浏览器打断点
                console.log(this.innerHTML);
            })
        }
    })()
</script>
</html>